當網頁的內容越來越多時，使用者需要不斷向下滑動，才能找到自己想查看的區域。因此，今天的目標是新增頁面導覽列，讓使用者可以快速跳轉到不同功能區塊，提升操作上的便利性。
一、設定導覽列樣式
首先在原本的CSS樣式區塊中加入以下程式碼：

.page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 28px;
    padding: 14px;
    background: white;
    border: 1px solid #dce5e2;
    border-radius: 12px;
}
.page-nav a {
    margin: 0;
    padding: 9px 14px;
    font-size: 14px;
}
.page-section {
    scroll-margin-top: 20px;
}
.page-intro {
    color: #647873;
    margin: 8px 0 20px;
}

二、建立頁面導覽列
在網站標題下方加入導覽列：

echo '<p class="page-intro">檢查醫療資料品質、查看清理紀錄，並下載清理後的資料。</p>';
echo '<nav class="page-nav">';
echo '<a href="#quality-report">資料品質報告</a>';
echo '<a href="#change-log">清理變更紀錄</a>';
echo '<a href="#cleaned-preview">清理後資料</a>';
echo '<a href="#export-data">匯出 CSV</a>';
echo '</nav>';

這裡使用 HTML的 <nav>元素表示頁面導覽區域，而href屬性中的#則用來指定要跳轉的區塊。
例如，點擊「資料品質報告」後，瀏覽器會尋找具有id="quality-report"的元素，並跳轉到該位置。
三、設定各功能區塊的定位
為了讓導覽列正常運作，需要在對應的功能區塊前加入定位元素。

echo '<div id="quality-report" class="page-section"></div>';

其他區塊也使用相同的方式，分別設定change-log、cleaned-preview與 export-data。
這樣就能讓導覽列的四個項目與網站中的實際內容互相對應。